layui.use(['form','layer'], function(){
    var form = layui.form;
    var $ = layui.jquery, layer = layui.layer;
    $(document).on('click','#button',function () {
        var xmlhttp = new XMLHttpRequest();
        //获取表单值
        var card = $('#card').val();
        var data = 'card=' + card;
        // alert(data)
        xmlhttp.open("GET","/storePayment/select?" + data, true);
        xmlhttp.send();
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                var json = JSON.parse(xmlhttp.responseText);
                var list = json.length;
                var table = $("#tab");
                var html = [];
                for (var i = 0; i < list; i++) {
                    html.push("<tr>");
                    html.push("<input type='text' hidden='hidden' id='card' value='" + json[0]["cardId"] + "'>");
                    html.push("<th>" + json[i]["cardId"] + "</th>");
                    html.push("<th>" + json[i]["name"] + "</th>");
                    html.push("<th>" + json[i]["iphone"] + "</th>");
                    html.push("<th>" + json[i]["balance"] + "</th>");
                    html.push("<th><button data-method='offset' data-type='auto' id='payment' type='button' class='layui-btn layui-btn-xs'>付款</button></th>");
                    html.push("</tr>");
                }
                // 清空数据
                table.html("");
                // 添加到页面中
                table.append(html);
            }
        }
    });

    // js 付款弹窗
    var active = {
        offset: function(othis){
            var id = $('#card').val();
            var type = othis.data('type')
                ,text = othis.text();
            layer.open({
                title : false,
                type: 1
                ,offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                ,id: 'layerDemo'+type //防止重复弹出
                ,content: '<div style="padding: 50px 50px;">'
                    +'<div class="layui-form-item">'
                    +'<label class="layui-form-label layui-bg-green">扣费金额：</label>'
                    +'<div class="layui-input-block">'
                    +'<input type="text" name="card" id="card" hidden="hidden" value="'+id+'">'
                    +'<input type="text" name="price" id="price" autocomplete="off" required="required" placeholder="请输入扣费金额" class="layui-input">'
                    +'</div>'
                    +'</div>'
                    +'<button type="submit" id="kf" class="layui-btn layui-btn-fluid">扣费</button>'
                    +'</div>'
                , closeBtn : 1
                ,btn: '关闭'
                ,btnAlign: 'c' //按钮居中
                ,shade: 0.1 //显示遮罩
                ,yes: function(){
                    layer.close(layer.index);
                }
            });
        }
    };
    // 扣款弹窗
    $(document).on('click','#payment', function(){
        var othis = $(this), method = othis.data('method');
        active[method] ? active[method].call(this, othis) : '';
    });

    //输入金额点击提交后进行扣款操作
    $(document).on('click','#kf', function(){
        var xmlhttp = new XMLHttpRequest();
        var price = $('#price').val();
        var card = $('#card').val();
        var storeId = $('#storeId').val();
        $.ajax({
            url: '/storePayment/pm',
            type: 'GET',
            dataType: 'json',
            data: {card: card,price: price,storeId: storeId},
            success:function(data){
                if (data != null){
                    layer.alert('扣款成功！', {icon: 1, title:'提示'}, function(){
                        layer.closeAll();
                    });
                }else{
                    layer.alert('扣款失败，请稍后重试！', {icon: 2, title:'提示'}, function(){
                        layer.closeAll();
                    });
                }
            }
        })
    });
});